<!--
普通表格，用于展示少量数据，无分页无增删改按钮，只有一个可选的查看详情。
-->
<template>
    <div>
        <el-table
                :data="tableData"
                max-height="528">
            <el-table-column
                    v-if="config.hasIndex"
                    label="序号"
                    type="index">
            </el-table-column>

            <el-table-column v-for="(column, index) in config.tableColumnsInfo" v-bind:key="index"
                             :label="column.label">
                <template slot-scope="scope" >
                    <div class="name-wrapper" v-else>
                        {{ scope.row[column.prop] }}
                    </div>
                </template>
            </el-table-column>

            <el-table-column
                    v-if="config.hasDetail"
                    fixed="right"
                    label="操作"
                    width="120">
                <template>
                    <el-button
                            type="text"
                            size="small">
                        查看详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

</template>

<script>
    import SimpleTableConfiguration from "./class/SimpleTableConfiguration";

    export default {
        name: "simpleTable",
        props: {
            url: String,
            config: {
                type: SimpleTableConfiguration
            }
        },
        data() {
            return {
                tableData: [],
                formData: null
            }
        },
        created() {
            this.loadTableData();
        },
        methods: {
             async loadTableData(params = {}) {
                 this.queryParams = params;
                 // 不分页
                 this.tableData = await this.$http.get(this.url,{params:params});
             },
        }
    }
</script>

<style lang="stylus" scoped>

</style>